<template>
  <div>
    
    <!-- 头部 -->
    <div class="head">
      <img src="../../assets/Life/地图icon.png" alt="" />
      <span>生活服务</span>
      
      <img src="../../assets/Life/icon_xiaoxi.png" alt="" />
    </div>
    <div class="middle">
      <!-- 图片 -->
      <div class="picture">
        <img src="../../assets/Life/img_banner.png" alt="" />
      </div>
      <!-- 缴费 -->
      <div class="life">
        <p>生活缴费</p>
      </div>
      <div class="pay">
        <router-link class="water" tag="div" to="/water">
          <img src="../../assets/Life/icon_shuifei.png" alt="" />
          <p>水费</p>
        </router-link>
        <router-link class="electricity" tag="div" to="/electricity">
          <img src="../../assets/Life/icon_dainfei.png" alt="" />
          <p>电费</p>
        </router-link>
        <router-link class="net" tag="div" to="/net">
          <img src="../../assets/Life/icon_kuandai.png" alt="" />
          <p>宽带</p>
        </router-link>
        <router-link class="more" tag="div" to="/More">
          <img src="../../assets/Life/icon_more.png" alt="" />
          <p>更多</p>
        </router-link>
      </div>
      <!-- 保洁 -->
      <div class="housekeeping">
        <router-link class="cleaner" tag="div" to="/cleaner"><span>保洁</span></router-link>
        <router-link class="move" tag="div" to="/move"><span>搬家</span></router-link>
        <router-link class="maintain" tag="div" to="/maintain"><span>家修</span></router-link>
      </div>
      <!-- 推荐 -->
      <div class="recommend">
        <span class="referrer">热门推荐</span>
        <span class="enjoy">为您提供最优质的服务，享受生活每一天</span>
      </div>
      <!-- 日常 -->
      <div class="service">
        <router-link class="everyday" tag="div" to="/everyday"><span>日常保洁</span></router-link>
        <router-link class="acne" tag="div" to="/anti"><span>除螨保洁</span></router-link>
      </div>
      <div class="card">
        <router-link class="remove" tag="div" to="/move"><span>宜居搬家</span></router-link>
        <router-link class="recharge" tag="div" to="/recharge"><span>充值卡优惠</span></router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  
};
</script>

<style>
.head {
  width: 100%;
  height: 1rem;
  display: flex;
  color: #fff;
  background-color: #ff5555;
  line-height: 1rem;
}
.head span {
  margin: 0 2.1rem;
  font-size: 0.4rem;
  color: #fff;
  letter-spacing: 0.05rem;
}
.head img {
  line-height: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.3rem;
  margin-left: 0.2rem;
}
.picture img {
  width: 100%;
  background-repeat: no-repeat;
}
.life {
  margin: 0.2rem 0.2rem;
}
.life p {
  text-align: left;
  font-size: 0.32rem;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 0.05rem;
}
.pay {
  display: flex;
  margin: 0.2rem 0.1rem;
}
.pay img {
  flex: 1;
  margin: 0 0.37rem;
}
.pay p {
  font-size: 0.25rem;
  color: rgba(0, 0, 0, 0.8);
  flex: 1;
  letter-spacing: 0.05rem;
}
.housekeeping {
  width: 100%;
  height: 2rem;
  display: flex;
}
.housekeeping div{
  width: 33%;
  height: 100%;
  float: left;
}
.housekeeping span {
  font-size: 0.4rem;
  color: #fff;
  letter-spacing: 0.05rem;
  flex: 1;
  line-height: 2rem;
}
.cleaner {
  margin-left: 0.1rem;
  background: url(../../assets/Life/img_baojie.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.move {
  margin: 0 0.1rem;
  background: url(../../assets/Life/img_banjia.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.maintain {
  margin-right: 0.1rem;
  background: url(../../assets/Life/img_jiaxiu.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.referrer {
  font-size: 0.4rem;
  margin: 0.15rem;
}
.enjoy {
  font-size: 0.3rem;
}
.service {
  height: 2rem;
  display: flex;
  margin: 0.2rem;
}
.service div{
  width: 50%;
}
.card {
  height: 2rem;
  display: flex;
  margin: 0.2rem;
}
.card div{
  width: 50%;
}
.service span {
  font-size: 0.4rem;
  color: #fff;
  flex: 1;
  line-height: 2rem; 
}
.card span{
  font-size: 0.4rem;
  color: #fff;
  flex: 1;
  line-height: 2rem;
}
.everyday {
  margin-right: 0.1rem;
  background: url(../../assets/Life/img_richang.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.acne {
  background: url(../../assets/Life/img_chuman.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.remove {
  margin-right: 0.1rem;
  background: url(../../assets/Life/img_yijubanjai.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.recharge {
  background: url(../../assets/Life/img_chongzhika.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>